var page = 1;

function a(){
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {

            //把GET到的test.json数据内容，转成数组对象格式
            var res  = JSON.parse(xmlhttp.responseText);
            //console.log(res.test);


            for(let i = 0; i < res.test.length ;i++){
                console.log(res.test[i]);



                var img = document.createElement("img");
                img.src = res.test[i].pic;

                var h4 = document.createElement("h4");
                h4.innerHTML = res.test[i].h4;





                var p = document.createElement("p");
                p.innerHTML = res.test[i].p;




                var div = document.createElement('div');
                var div1 = document.createElement('div');


                var div2 = document.createElement('div');
                div1.appendChild(div2);


                div2.className = 'div2';


                div2.style.position = 'relative';
                div2.style.width = '25%';
                div2.style.left  = '-19px';
                div2.style.height = '6px';
                div2.borderRadius = '3px';
                div2.backgroundClip = 'padding-box';
                div2.style.background = '#ff3338';





                div.appendChild(div1);
                div1.className = 'div1';


                div1.style.position = 'absolute';
                div1.style.left = '219px';
                div1.style.top = '92px';
                div1.style.width = '159px';
                div1.style.height = '6px';
                div1.borderRadius = '3px';
                div1.backgroundClip = 'padding-box';
                div1.style.background = '#ffe4dc';




                var s1 = document.createElement('span');
                var s2 = document.createElement('span');
                var q2 = document.createElement('span');
                var q3 = document.createElement('span');



                s1.innerHTML = res.test[i].s1;
                s2.innerHTML = res.test[i].s2;
                q2.innerHTML = res.test[i].q2;
                q3.innerHTML = res.test[i].q3;



                div.appendChild(img);
                div.appendChild(h4);
                div.appendChild(p);
                div.appendChild(s1);
                div.appendChild(s2);
                div.appendChild(q2);
                div.appendChild(q3);


                console.log(div);





                document.querySelector("#list").appendChild(div);

            }



            //document.querySelector('#mydiv').innerHTML=xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET",page+".json",true);
    xmlhttp.send();
}

a();



////点击btn按钮后，执行a
document.querySelector("#btn").addEventListener('click',function(){
if(page >= 4){
    page = 1;
}else{
    page++;
}
document.querySelector("#list").innerHTML = "";
    a();
});